import React, { Component, PropTypes } from 'react';

import '../BodyDataInput.scss';
import LayoutView, { LayoutMode } from '../../layout';
import { SelectButtonGroup, SelectButton } from '../../common-ui-parts';
import { BodyItemConstant as BiC } from '../../../constants/InputItemConstants';
import { BodyDataInputContextConstant } from '../../../constants/ComponentContextConstants';

// 質問に関するイラスト
import imgQ6_1 from './images/imgQ6_1.png';

/**
 * Q06.運動習慣（座っている時間）
 */
class Question06_01 extends Component {
  getChildContext() {
    const { [BiC.EXERCISE_TIME_SITTING]: sitting } = this.context.parent.inputData;
    return Object.freeze({
      parent: Object.freeze(Object.assign({}, this.context.parent, {
        // 未入力の場合、[次へ]ボタンは無効
        disabledNext: sitting === undefined,
      })),
    });
  }

  shouldComponentUpdate(nextProps, nextState) {
    return this.context.parent.pageIndex === nextProps.index;
  }

  scrollPageTop() {
    this.refs.layoutView.getWrappedInstance().scrollTop();
  }

  validatePage() {
    // 入力チェック（true:チェックOK）
    return this.context.parent.validateQuestionPage([BiC.EXERCISE_TIME_SITTING]);
  }

  render() {
    const { inputData, errorInfo, updateState, handleNext } = this.context.parent;

    // 運動習慣（座っている時間）入力時の処理
    const handleChange = () => {
      // onChangeイベントが複数回コールされるとページ移動後に、さらに処理が実行されてしまうため、
      // onChangeイベントが複数回コールされても大丈夫なように、自ページ以外では実行されないようガードする
      if (this.context.parent.pageIndex !== this.props.index) return;

      // 項目入力で次のページへ移動
      handleNext();
    }

    return (
      <LayoutView
        ref="layoutView"
        mode={LayoutMode.QUESTION}
        title="運動習慣"
        question={{
          no: 6,
          sentence: <p>1日のうち、座っている時間は<br/>どのくらいですか？</p>,
          illustSrc: imgQ6_1,
          illustHeight: 224,
          childNo: 1,
          childTotalNo: 3,
          helpTitle: 'Q6. 運動習慣について',
          helpText: <p>昨年1年間を振り返り、標準的な1日の過ごし方を想定してお答えください。</p>,
        }}
        errorText={errorInfo.get(BiC.EXERCISE_TIME_SITTING)}
        className="exercise-habit"
      >
        {/* 運動習慣（座っている時間） */}
        <div className="guidance-exercise">
          <p>昨年1年間を振り返りお答え下さい。</p>
        </div>
        <dl className="content">
          <dt style={{ display: 'none' }}>{BiC.EXERCISE_TIME_SITTING.label}</dt>
          <dd>
            <SelectButtonGroup
              name={BiC.EXERCISE_TIME_SITTING}
              value={inputData[BiC.EXERCISE_TIME_SITTING]}
              propagate={(name, value, doValidation, validateRequried) => updateState(name, value, doValidation, validateRequried, handleChange)}
            >
              {BiC.EXERCISE_TIME_SITTING.choices.map((choice, index) => (
                <SelectButton key={index} value={choice.value} label={choice.label} />
              ))}
            </SelectButtonGroup>
          </dd>
        </dl>
      </LayoutView>
    );
  }

}

Question06_01.contextTypes = BodyDataInputContextConstant;
Question06_01.childContextTypes = Question06_01.contextTypes;

/*Question06_01.propTypes = {
  index: PropTypes.number,    // 自ページINDEX（0～）
};*/

export default Question06_01
